@(game: QuizGame)
@player1 = @{ game.getPlayers().get(0) }
@player2 = @{ game.getPlayers().get(1) }
@nameOfPlayer1 = @{ player1.getName() }
@nameOfPlayer2 = @{ player2.getName() }
@questions = @{ game.getCurrentRound().getQuestions() }
@maxIndexOfQuestion = @{ questions.size() - 1 }
@currentQuestion = @{ game.getCurrentRound().getCurrentQuestion(player1) }
@currentCategory = @{ currentQuestion.getCategory() }
@currentCategoryName = @{ currentCategory.getName(lang.code) }
@correctOrIncorrect(questionIndex: Int, player: QuizUser) = @{
	game.getCurrentRound().getAnswer(questionIndex, player) match {
		case null => "unknown"
		case answer if answer.isCorrect() => "correct"
		case answer if !answer.isCorrect() => "incorrect"
	}
}
@main("main.quiz",
      pageid = "welcomepage",
      navigation = immutable.Map(routes.Authentication.logout.url -> "login.logout")) {
	<section role="main" id="quiz">
		<section id="roundinfo" aria-labelledby="roundinfoheading">
		    <h2 id="roundinfoheading" class="accessibility">@Messages("quiz.playerinfo")</h2>
		    <div id="player1info">
		        <span id="player1name">@nameOfPlayer1</span>
		        <ul class="playerroundsummary">
		        @for(i <- 0 to maxIndexOfQuestion) {
		            <li><span class="accessibility">@Messages("quiz.question") @i:</span><span id="player1answer@i" class="@correctOrIncorrect(i, player1)"></span></li>
		        }
		        </ul>
		    </div>
		    <div id="player2info">
		        <span id="player2name">@nameOfPlayer2</span>
		        <ul class="playerroundsummary">
		        @for(i <- 0 to maxIndexOfQuestion) {
		            <li><span class="accessibility">@Messages("quiz.question") @i:</span><span id="player2answer@i" class="@correctOrIncorrect(i, player2)"></span></li>
		        }
		        </ul>
		    </div>
		    <div id="currentcategory"><span class="accessibility">@Messages("quiz.category"):</span> @currentCategoryName</div>
		</section>

		<!-- Question -->

		<section id="question" aria-labelledby="questionheading">
		    
		    @helper.form(routes.Quiz.addAnswer, 'id -> "questionform") {
		        <h2 id="questionheading" class="accessibility">@Messages("quiz.question")</h2>
		        <p id="questiontext">@currentQuestion.getText(lang.code)</p>
		        <ul id="answers">
		        @for((choice, i) <- currentQuestion.getChoices().zipWithIndex) {
		            <li><input name="choices[]" id="option@i" type="checkbox" value="@choice.getId()"/><label id="labeloption@i" for="option@i">@choice.getText(lang.code)</label></li>
		        }
		        </ul>
		        <input id="questionid" name="questionid" type="hidden" value="@currentQuestion.getId()"/>
		        <input id="timeleftvalue" name="timeleft" type="hidden" value="100"/>
		        <input id="next" type="submit" value="@Messages("quiz.nextquestion")"/>
		    }
		</section>

		<section id="timer" aria-labelledby="timerheading">
		    <h2 id="timerheading" class="accessibility">@Messages("quiz.timer")</h2>
		    <p><span id="timeleftlabel">@Messages("quiz.remainingtime"):</span> <time id="timeleft">00:30</time></p>
		    <meter id="timermeter" min="0" low="20" value="100" max="100"/>
		</section>

		<section id="lastgame">
		    <p>@Messages("quiz.previousgame"): @Messages("quiz.previousgame.never")</p>
		</section>
		<script type="text/javascript">
		    //<![CDATA[
		    
		    // initialize time
		    $(document).ready(function(){
		        var maxtime = @currentQuestion.getMaxTime();
		        var hiddenInput = $("#timeleftvalue");
		        var meter = $("#timer meter");
		        var timeleft = $("#timeleft");
		        
		        hiddenInput.val(maxtime);
		        meter.val(maxtime);
		        meter.attr('max', maxtime);
		        meter.attr('low', maxtime/100*20);
		        timeleft.text(secToMMSS(maxtime));
		        
		        // set last game
		        if(supportsLocalStorage()){
		            var lastGameMillis = parseInt(localStorage['lastGame'])
		            if(!isNaN(parseInt(localStorage['lastGame']))){
		                var lastGame = new Date(lastGameMillis);
		            	$("#lastgame p").replaceWith('<p>@Messages("quiz.previousgame"): <time datetime="'
		            			+ lastGame.toUTCString()
		            			+ '">'
		            			+ lastGame.toLocaleString()
		            			+ '</time></p>')
		            }
		    	}
		    });
		    
		    // update time
		    function timeStep(){
		        var hiddenInput = $("#timeleftvalue");
		        var meter = $("#timer meter");
		        var timeleft = $("#timeleft");
		        
		        var value = $("#timeleftvalue").val();
		        if(value > 0){
		            value = value - 1;   
		        }
		        
		        hiddenInput.val(value);
		        meter.val(value);
		        timeleft.text(secToMMSS(value));
		        
		        if(value <= 0){
		            $('#questionform').submit();
		        }
		    }
		    
		    window.setInterval(timeStep,1000);
		    
		    //]]>
		</script>
    </section>
}